<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./src/asset/css/API.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        html,
        body {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        main {
            flex: 1;
        }

        header {
            width: 100%;
        }

        footer {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 源码大数据 -->
    <header>
        <div class="nav">
            <span><img src="./src/asset/images/api-new-logo-white.png" alt=""></span>
        </div>
        <ul class="nav-1 concent">
            <li>首页</li>
            <li>API</li>
            <li>案例</li>
        </ul>
        <ul class="nav-2">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册有礼</a></li>
        </ul>
    </header>
    <main>
        <!-- 头部栏目 -->
        <div class="main-0 concent">
            <h1>API分类</h1>
        </div>
        <ul class="main-1 concent">
            <li><a href="#">全部</a></li>
            <li><a href="#">技术工程</a></li>
            <li><a href="#">开发设计</a></li>
            <li><a href="#">前端技术</a></li>
            <li><a href="#">后端开发</a></li>
            <li><a href="#">cool工程</a></li>
            <li><a href="#">VSC开发</a></li>
            <li><a href="#">停止运行</a></li>
            <li><a href="#">部门分化</a></li>
            <li><a href="#">世界毁灭</a></li>
            <li><a href="#">世界毁灭</a></li>
            <li><a href="#">世界毁灭</a></li>
            <li><a href="#">世界毁灭</a></li>
        </ul>
        <!-- 搜索框 -->
        <ul class="main-2 concent">
            <li>全部</li>
            <li><input type="text" placeholder="身份证实名"></li>
            <li><img src="./src/asset/images/magnifier.png" alt=""></li>
        </ul>
        <!-- 图片框 -->
        <ul class="main-3 concent">
            <li>
                <img src="./src/asset/images/API_01.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <span class="span1">企业专用</span>
                <img src="./src/asset/images/API11.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <img src="./src/asset/images/API_01.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <span class="span1">企业专用</span>
                <img src="./src/asset/images/API11.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <img src="./src/asset/images/API_01.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <span class="span1">企业专用</span>
                <img src="./src/asset/images/API11.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <img src="./src/asset/images/API_01.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <span class="span1">企业专用</span>
                <img src="./src/asset/images/API11.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <img src="./src/asset/images/API_01.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
            <li>
                <span class="span1">企业专用</span>
                <img src="./src/asset/images/API11.jpg" alt="">
                <p>2021出行防疫政策指南</p>
                <p>免费</p>
            </li>
        </ul>
        <ul class="main-4 concent">
            <li class="main-5"><a href="#">1</a></li>
            <li class="main-5"><a href="#">2</a></li>
            <li class="main-5"><a href="#">3</a></li>
            <li class="main-5"><a href="#">4</a></li>
            <li class="main-5"><a href="#">5</a></li>
            <li class="main-5"><a href="#">6</a></li>
            <li class="main-5"><a href="#">7</a></li>
            <li class="main-5"><a href="#">8</a></li>
            <li class="main-5">......</li>
            <li class="main-6"><a href="#">下一页></a></li>
        </ul>
    </main>
    <footer>
        <div class="footer concent">
            <div class="footers">
                <div class="footer-1">
                    <span>联系与支持</span>
                    <ul>
                        <li>400-882-7715</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                    </ul>
                </div>
                <div class="footer-1">
                    <span>联系与支持</span>
                    <ul>
                        <li>400-882-7715</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                    </ul>
                </div>
                <div class="footer-1">
                    <span>联系与支持</span>
                    <ul>
                        <li>400-882-7715</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                    </ul>
                </div>
                <div class="footer-1">
                    <span>联系与支持</span>
                    <ul>
                        <li>400-882-7715</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                    </ul>
                </div>
                <div class="footer-1">
                    <span>联系与支持</span>
                    <ul>
                        <li>400-882-7715</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                        <li>咨询问题</li>
                    </ul>
                </div>
                <div class="footer-2">
                    <p>微信公众号</p>
                    <p>源码时代</p>
                    <span><img src="./src/asset/images/showqrcode.jpg" alt=""></span>
                </div>
            </div>
            <div class="footer-3">
                <img src="./src/asset/images/bei1.png" alt="">
                <img src="./src/asset/images/bei2.png" alt="">
                <span class="footer2">增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3营业执照</span>
                <p class="footer3">源码大数据股份有限公司©版权所有</p>
            </div>
        </div>
    </footer>
</body>

</html>